<template>
  <div>
    <!-- 添加商品 -->
    <el-dialog
      v-model="props.visible"
      title="选择商品"
      :before-close="beforeClose"
    >
      <el-input
        v-model="name"
        style="width: 240px"
        placeholder="商品名称搜索"
        size="small"
        class="el-input__inner"
      >
        <template #append>
          <el-button :icon="Search" @click="onSearch" />
        </template>
      </el-input>
      <el-table
        align="center"
        :data="tableData"
        ref="multipleTableRef"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :border="true"
      >
        <el-table-column align="center" type="selection" width="60">
          <template #default="scope">
            <div>
              <el-checkbox
                v-model="addProudect"
                @change="changeAddProudect"
                size="large"
              />
            </div>
          </template> </el-table-column
        >>
        <el-table-column
          align="center"
          prop="name"
          label="商品名称"
          width="508"
        />
        <el-table-column align="center" label="货号" width="160">
          <template #default="scope">
            <div>NO.</div>
          </template> </el-table-column
        >>
        <el-table-column align="center" label="价格" width="174">
          <template #default="scope">
            <div>
              {{ `￥${scope.row.price}` }}
            </div>
          </template> </el-table-column
        >>
      </el-table>
      <div class="pager">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          background
          :page-sizes="[5]"
          layout="prev, pager, next"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <template #footer>
        <span>
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, withDefaults } from "vue";
import { Search } from "@element-plus/icons-vue";
// 封装数据处理函数
import useTable from "../../../hooks/useTables";
// 导入请求接口
import * as api from "../../../request/api";
// 导入类型接口
import { IProductListParams } from "../../../request/SmsAdminConreiller";
const dialogTableVisible = ref(true);
const name = ref("");
// const gridData = reactive({}) as Ref<>
const addProudect = ref<true | false>(false);

// 接收父组件的数据
let props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: true,
  }
);
// 自定义事件
let emits = defineEmits<{
  (event: "cancel"): void;
}>();
// 关闭弹出框的回调
let beforeClose = () => {
  onCancel();
};
// 取消
let onCancel = () => {
  emits("cancel");
};

let changeAddProudect = () => {
  // console.log(e);
};
// 确定
let onConfirm = () => {
  // 将参数返回给父级 ，让父级发请求完成功能
  // emits('confirm', ownForm.value)
  console.log("addProudect", addProudect);

  onCancel();
};

// 弹出框选择商品的数据
//数据请求展示
let { tableData, getTableData, pagination } = useTable(api.flash.productList, {
  // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
  pageSize: 5,
  // pageNum:1,
  keyword: name, // name 是响应式的
});
getTableData();
// console.log(tableData);
// console.log(pagination);

let onSearch = () => {
  console.log(name);

  getTableData();
};

//分页
const handleSizeChange = (val: number) => {
  getTableData();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  getTableData();
  console.log(`current page: ${val}`);
};

// 全选
interface User {
  date: string;
  name: string;
  address: string;
}
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([]);
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
</script>

<style lang="scss" scoped>
.el-input__inner {
  margin-bottom: 30px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.pager {
  display: flex;
  justify-content: right;

  margin: 10px;
}
</style>
